<script setup>
import AsideCard from "./asideCard.vue";
import CardItem from "./aside/layout/index.vue";
import { useDraggable } from 'vue-draggable-plus'


import { inject, ref } from "vue";
const {baseInfo} = inject('data')
import {addModel,deleteModel} from "@/utils/useResumehook.js"
console.log(baseInfo);

const handleShow = () => {
  console.log("show");
};

const handleDelete = (e) => {
  console.log("delete");
  console.log(e);
  deleteModel(baseInfo,e)
};

const drapE = ref(null)

const { start } = useDraggable(drapE,baseInfo, {
  animation: 150,
  ghostClass: 'ghost',
  filter: '.no-drag', // 添加过滤类，禁止拖动带有 no-drag 类的元素
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})

const itemClick = (e) => {
  baseInfo.forEach(element => {
    element.active = false
  });
  e.active = true
}
</script>

<template>
  <div class="aside-layout-main">
    <AsideCard :title="baseInfo.title??''" :icon="baseInfo.icon??'ScaleToOriginal'">
      <div class="aside-layout-content" ref="drapE">
        <CardItem 
          v-for="item in baseInfo" 
          :cardData="item" 
          :class="{ 
            'active': item.active, 
            'no-drag': !item.draggable // 根据 draggable 属性添加 no-drag 类
          }" 
          @showItem="handleShow" 
          @deleteItem="(e)=>handleDelete(e)" 
          @click="itemClick(item)"  
        />
      </div>
      <div class="aside-layout-footer">
        <el-button class="aside-add-btn" @click="addModel(baseInfo)">添加自定义模块</el-button>
      </div>
    </AsideCard>
  </div>
</template>

<style scoped>
.aside-layout-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.active {
  border: 1px var(--el-color-primary) solid;
}

.aside-layout-content>div:first-child {
  margin-bottom: 20px;
}

.aside-layout-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.aside-add-btn {
  height: 36px;
  margin: 20px;
  width: 260px;
  transition: 0.2s linear;
}

.aside-add-btn:hover {
  transform: scale(1.05);
}


</style>